<template>
	<view class="main">
		<!-- 搜索 -->
		<lesson-index-nav :currentIndex="currentIndex" :navIndex="navIndex" :grade_list='gradeList' @selectGrade='selectGrade'></lesson-index-nav>
		<!-- 科目导航 -->
		<v-nav class="naver" :subject_list="subjectList" @ckSubject="ckSubject"></v-nav>
		<!-- 轮播图 -->
		<view class="banner"><v-banner></v-banner></view>
		<!-- 选课资讯/班 -->
		<view class="type-wrap"><v-class-type @linkClassTypeDetail='linkClassTypeDetail'></v-class-type></view>
		<!-- 免费班 -->
		<view class="class-wrap">
			<view class="title-wrap">
				<view>
					<text class="title">免费班</text>
				</view>
				<view class="btn-more" @click="linkFreeClass"
				click="linkFreeClass"><v-btn-more></v-btn-more></view>
			</view>
			<!-- 列表 -->
			<view class="summary-wrap" v-if="freeClassList.length > 0">
				<view class="item" v-for="(item,index) in freeClassList" :key='index'>
					<v-free-summary :item='item'></v-free-summary>
				</view>
			</view>
			<view class="no-item-wrap" v-else>
				<text>暂无免费班~</text>
			</view>
		</view>
		<!-- 名师推荐 -->
		<view class="teacher-wrap">
			<view class="title-wrap">
				<view>
					<text class="title">名师推荐</text>
				</view>
				<view class="btn-more" @click="linkTeacherDetail('teacher-search')"><v-btn-more></v-btn-more></view>
			</view>
			<!-- 滑动列表 -->
			<scroll-view scroll-x="true" class="scroll-wrap">
				<view class="item" v-for="(item,index) in teacherList" :key='index'>
					<v-recommend-tercher class="wrap" :teacher="item"></v-recommend-tercher>
				</view>
			</scroll-view>
		</view>
		<!-- 精品课程推荐 -->
		<view class="competitive-wrap">
			<view class="title-wrap">
				<view>
					<text class="title">精品课程推荐</text>
				</view>
			</view>
			<view class="summary-wrap" v-if="recommendList.length > 0">
				<view class="item" v-for="(item, index) in recommendList" :key="index">
					<v-competitive-summary mclass="lesson-card" :item='item' :istyle="'background: #F7F7F7;'"></v-competitive-summary>
				</view>
			</view>
			<view class="no-item-wrap" v-else>
				<text>暂无精品课程推荐~</text>
			</view>
		</view>
	</view>
</template>

<script>
	import nav from './components/nav'
	import banner from './components/banner'
	import classType from './components/class-type'
	import btnMore from './components/btn-more'
	import freeSummary from './components/free-summary'
	import recommendTercher from './components/recommend-tercher'
	import competitiveSummary from './components/competitive-summary'
	import lessonIndexNav from './components/lesson-index-nav.vue'
	import utils from '@/common/util.js'
	export default {
		data () {
			return {
				currentIndex: 0, // 课程 / 我课 的当前索引
				navIndex: 0, // 课程 / 我课 的选择索引
				grade_id: uni.getStorageSync('userInfo').grade, // 年级ID
				subject_id: 1, // 科目ID
				subjectList: [], // 科目列表
				gradeList: [], // 年级列表
				bannerList: [], // 海报轮播图列表
				freeClassList: [], // 免费班列表
				teacherList: [], // 名师推荐列表	
				recommendList: [], // 精品列表
				page: 1, // 页数
				isMore: false, // 是否加载更多
				isNoMore: false, // 没有更多数据的条件
			}
		},
		components: {
			vNav: nav,
			vBanner: banner,
			vClassType: classType,
			vBtnMore: btnMore,
			vFreeSummary: freeSummary,
			vRecommendTercher: recommendTercher,
			vCompetitiveSummary: competitiveSummary,
			lessonIndexNav: lessonIndexNav
		},
		
		// 加载更多精品课程推荐列表
		onReachBottom() {
			if (this.isNoMore) return
			uni.showLoading({
				title: '正在加载中...'
			})
			this.isMore = true
			this.getData(`stu/recommend/course/infos/${this.subject_id}`, {
				limit: 10,
				page: ++this.page
			}, 'getRecommend')
		},
		
		onLoad() {
			// 获取年级列表
			this.getData('common/grade', {}, 'getGrade')
			
			// 获取科目列表
			this.getData('common/subject', {}, 'getSubject')
			
			// 获取免费班,默认语文对对应的年级免费班
			this.getData(`stu/course/free/infos/${1}/${this.grade_id}`, {}, 'getClass')
			
			// 获取名师列表,默认拿取10条
			this.getData('stu/recommend/teacher/infos', {
				limit: 8
			}, 'getTeacherList')
			
			// 获取精品推荐列表，默认获取语文的精品推荐列表
			this.getData('stu/recommend/course/infos', {
				subject_id: 1,
				limit: 10
			}, 'getRecommend')
		},
		methods: {
			/**
			 * @param {String} url 接口地址
			 * @param {Object} params 请求参数，以请求体的形式进行存放
			 * @param {Array} query 请求参数，以数组的形式进行存放，并进行拼接到url地址中如：baidu/xx1/xx2
			 * @param {mark} mark 请求标识，来操作不同的数据结果
			 */
			getData(url, params = {}, mark = '') {
				this.$zbapi.apiPost(url, params).then(res => {
					if (res.data.code == 0) {
						switch(mark) {
							case 'getRecommend':
								res.data.data.list.forEach((item,index) => {
									item.start_month = utils.getAllTime(item.teach_start_day).substr(0, 4).replace(/-/g, '.')
									item.end_month = utils.getAllTime(item.teach_end_day).substr(0, 4).replace(/-/g, '.')
									item.subject_name = uni.getStorageSync('zbSubject')[item.subject_id]
									item.figureimgsList = !item.figureimgs ? [] : item.figureimgs.split(',')
									if (item.figureimgsList.length > 4) item.figureimgsList.splice(4, item.figureimgsList.length - 4)
									let now = parseInt(Date.now() / 1000)
									let enrol = parseInt((item.enrol_end_time - now) / 86400) // 获取截止日期
									if (enrol == 0 && (item.enrol_end_time - now) > 0) {
										item.enrol_end_time = 1
									} else {
										item.enrol_end_time = enrol
									}
								})
								if (this.isMore) {
									uni.hideLoading()
									if (res.data.data.list.length <= 0) {
										this.isNoMore = true
										return uni.showToast({
											title: '无更多数据噢~',
											icon: 'none'
										})
									}
									this.recommendList = this.recommendList.concat(res.data.data.list)
								} else {
									this.recommendList = res.data.data.list
								}
							break;
							
							case 'getGrade':
								this.gradeList = res.data.data
							break;
							
							case 'getSubject':
								let sub_obj = {}
								res.data.data.forEach((item, index) => {
									sub_obj[item.subject_id] = item.subject_name
								})
								this.subjectList = res.data.data
								uni.setStorageSync('zbSubjectArr', res.data.data) // 缓存一份科目数组，以便后续使用
								uni.setStorageSync('zbSubject', sub_obj) // 缓存一份科目对象，以便后续使用
							break;
							
							case 'getTeacherList':
								res.data.data.list.forEach(item => {
									item.impression = item.impression.replace(/,/g, ' | ')
								})
								this.teacherList = res.data.data.list
							break;
							
							case 'getClass':
								this.freeClassList = res.data.data
							break;
						}
					} else {
						switch(mark) {
							case 'getClass':
								this.freeClassList = []
							break;
						}
					}
				}).catch(err => {
					uni.showToast({
						title: "网络异常~",
						icon: 'none',
						complete() {
							setTimeout(e=>{
								uni.navigateBack()
							}, 800)
						}
					})
				})
			},
			
			// 选择科目
			ckSubject(subject_id){
				if (this.subject_id === subject_id) return 
				this.subject_id = subject_id
				this.closeState()
				// 更新免费班
				this.getData(`stu/course/free/infos/${subject_id}/${this.grade_id}`, {}, 'getClass')
				// 更新精品推荐
				this.getData('stu/recommend/course/infos',{
					subject_id,
					limit: 10
				}, 'getRecommend')
			},
			
			// 选择年级
			selectGrade(index) {
				this.grade_id = this.gradeList[index].grade_id
				// 更新免费班
				this.getData(`stu/course/free/infos/${this.subject_id}/${this.grade_id}`, {}, 'getClass')
			},
			
			// 选课/免费/技巧...班级跳转
			linkClassTypeDetail(item) {
				uni.navigateTo({
					url: item.url + '?title=' + item.title + '&kind=' + item.kind
				})
			},
			
			// 点击更多跳转免费班
			linkFreeClass() {
				uni.navigateTo({
					url: 'free-lesson?title=免费班&kind=1'
				})
			},
			
			// 名师推荐列表跳转
			linkTeacherDetail(url){
				uni.navigateTo({url})
			},
			
			// 取消状态
			closeState() {
				this.isMore = false
				this.isNoMore = false
				this.page = 1
			},
			
			// 跳转精品课程详情
			linkRecommend() {
				
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '../../static/font_lesson/iconfont.css';
	page{background: #FFF;}
	// .naver{padding-top: 148upx;}
	.banner{display:flex; justify-content: center; margin: 0 auto;}
	.type-wrap{padding: 36upx 30upx;}
	.no-item-wrap{text-align: center; font-size: 30upx; color: #C4C4C4; line-height: 80upx; height: 80upx;background: #FFF;}
	
	.class-wrap{margin-top: 12upx; padding:0 30upx;}
	.class-wrap .summary-wrap{display:flex; justify-content: space-between; flex-wrap:wrap;}
	.class-wrap .summary-wrap .item{ margin-top: 30upx;}
	
	.title-wrap{display: flex;}
	.title{padding-left:16upx; border-left: 4upx solid #00D5A2; font-size:34upx; font-weight:bold; color:#333; letter-spacing: 2upx; vertical-align: middle;}
	.title-wrap .btn-more{flex:1; text-align: right;}
	
	.competitive-wrap{margin-top:12upx; padding:0 30upx;}
	.competitive-wrap .summary-wrap{display:flex; justify-content: space-between; flex-wrap:wrap;}
	.competitive-wrap .summary-wrap .item{margin-top: 36upx; width:100%;}
	
	.teacher-wrap{overflow: hidden; margin-top: 12upx; padding:30upx 30upx;}
	.teacher-wrap .scroll-wrap{white-space:nowrap; width: 100%; margin-top:30upx;display: flex;align-items: center;height: 248upx;}
	.teacher-wrap .scroll-wrap .item{display:inline-block; margin-right:20upx;}
</style>
